<template>
  <div class="guide flex flex_column align_center">
    <div class="time-box flex flex_column justify_center mt_60" style="color: #fff">
      <div class="flex flex_center fontsize_100" style="width: 700px">
        <span class="p_10 m_10 transition_0_3">{{ U.toZero(time.hour) }}</span>
        <span class="p_10 mb_10 mt_10 transition_0_3" :style="`opacity:${flag?'1':'0'}`"> : </span>
        <span class="p_10 m_10 transition_0_3" >{{ U.toZero(time.minute) }}</span>
        <span class="p_10 mb_10 mt_10 transition_0_3" :style="`opacity:${flag?'1':'0'}`"> : </span>
        <span class="p_10 m_10 transition_0_3" >{{ U.toZero(time.second) }}</span>
      </div>
      <div class="flex flex_center fontsize_32" style="width: 700px">
        <span class="p_10 ">{{ time.year }}</span>
        <span class="mb_10 "> / </span>
        <span class="p_10 ">{{ U.toZero(time.month) }}</span>
        <span class="mb_10 "> / </span>
        <span class="p_10 ">{{ U.toZero(time.day) }}</span>
      </div>
    </div>
    <div class="mt_30" v-if="true">
      <ShadowBox width="700px" height="500px" borderWidth="4px" plain>
        <UserCard
          :img="userInfo.avatar"
          :title="userInfo.name"
          :content="userInfo.introduction"
          backgroundColor="rgba(0,0,0,.1);"
        />
      </ShadowBox>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import ShadowBox from "../components/shadowBox.vue";
import UserCard from "../components/userCard.vue";
export default {
  name: "guide",
  components: {
    ShadowBox,
    UserCard,
  },
  data() {
    return {
      time: {
        year: "2020",
        month: "01",
        day: "01",
        hour: "00",
        minute: "00",
        second: "00",
      },
      flag:false,
    };
  },
  created() {
    this.getTime();
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    getTime() {
      let _n = this.time.second;
      this.time = this.U.newTime();
      if(_n != this.time.second){
        this.flag = true;
        setTimeout(()=>{
          this.flag = false;
        },500)
      }
      requestAnimationFrame(() => {
        this.getTime();
      });
    },
  },
};
</script>

<style lang='scss' scoped>
@import "../style/theme.scss";
.guide {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  &::before {
    position: fixed;
    content: "";
    z-index: -1;
    top: -10px;
    left: -10px;
    // filter: blur(5px);
    width: calc(100vw + 20px);
    height: calc(100vh + 20px);
    background-color: #f8f8f8;
    // background-image: url(https://api.xygeng.cn/Bing/);
    background-image: url(../assets/images/guide.jpg);
    background-size: cover;
  }
}
</style>